<template>
  <div class="wrapper">
    <div class="perTopbg">
      <div class="headerScroll" :class="scrolled?'active':''">
        <router-link to="/softwareSeting" class="perSeting left"></router-link>
        <span class="perNews right" @click="perNews"></span>
        <router-link to="/cart" class="perShopping right">
          <span class="num" v-if="count!=0">{{count}}</span>
        </router-link>
      </div>
      <div class="perHeader">
        <div class="headerInfo">
          <img v-if="list.memberHead" :src="imageUrl+list.memberHead+imageAfterUrl" class="headerImg" @click="userDataSet">
          <img v-else src="../../images/memberHeader.png" class="headerImg"  @click="userDataSet">
          <div class="headerRightText">
            <h2 class="headerName" @click="userDataSet">{{phone}}</h2>
            <span class="memberGrade" v-if="list.memberLevelName === '普卡'"><i class="memberGradeIcon01"></i>普卡<router-link to="/memberCenter/1" class="fr immediately"><em class="fl"></em><em>立领400元</em> <em class="fr"></em></router-link></span>
            <span class="memberGrade" v-if="list.memberLevelName === '金卡'"><i class="memberGradeIcon02"></i>金卡<router-link to="/memberCenter/1" class="fr immediately"><em class="fl"></em><em>立领400元</em> <em class="fr"></em></router-link></span>
            <span class="memberGrade" v-if="list.memberLevelName === '白金卡'"><i class="memberGradeIcon03"></i>白金卡<router-link to="/memberCenter/1" class="fr immediately"><em class="fl"></em><em>立领400元</em> <em class="fr"></em></router-link></span>
            <span class="memberGrade" v-if="list.memberLevelName === '黑金卡'"><i class="memberGradeIcon04"></i>黑金卡
            </span>
          </div>
        </div>
        <div class="userInfo border-top">
          <router-link to="./memberCode" class="userInfoItem">
            <span class="userCode"></span>
            <p>会员码</p>
          </router-link>
          <router-link to="./integralDetails" class="userInfoItem">
            <span>{{list.integral}}</span>
            <p>积分</p>
          </router-link>
          <router-link to="./cardVoucher" class="userInfoItem">
            <span>{{list.couponNum}}</span>
            <p>卡券</p>
          </router-link>
        </div>
      </div>
    </div>
    <div class="perOrder">
      <!-- 我的订单 -->
      <order-index :orderNum="orderNum" v-if="orderNum"></order-index>
      <person-title content="我的收藏" :moreShow="collNum.goodsCount > 0"></person-title>
      <div class="collectBox" v-if="collNum.goodsCount < 1">
        <router-link to="/find" class="goToAdd">去逛逛</router-link>
        <span class="buttonTips">您还没有商品收藏</span>
      </div>
      <div class="collectBox" v-else>
        <!-- 有收藏商品 -->
        <div class="goodsCollImg">
          <img :src="imageUrl + item.goodsPics[0].value+imageAfterUrl" alt="" v-for="item in goodsCollArr" :key="item.id" @click="goodsDetails(item.id)">
        </div>
      </div>
      <div class="collectNumber">
        <router-link to="/collect/0" class="collectNumItem left">
          <p>商品收藏</p><span>{{collNum.goodsCount}}</span>
        </router-link>
        <router-link to="/collect/1" class="collectNumItem list">
          <p>内容收藏</p><span>{{collNum.contentCount}}</span>
        </router-link>
      </div>
      <person-title content="优惠卡券" :moreShow="coupons.length > 0"></person-title>
      <div ref="couponsScroll" class="couponsScroll" :class="{couponsScrollBg:coupons.length === 0}">
        <ul class="memberGradeScroll clearfix" :style="{width:cardScrollWidth+'rem'}">
          <li class="cardVolItem" v-for="item in coupons" :key="item.id" @click="cardVoucher">
            <card :item="item" :index="0" :showOperate="true"/>
          </li>
        </ul>
      </div>
      <person-title content="可能感兴趣的活动" :moreShow="activitys.length > 0"></person-title>
      <activitys-details v-if="activitys.length > 0" :activitysData="activitys"></activitys-details>
      <div v-else class="emptyAmusingBg"></div>
      <person-title content="必备工具" :moreShow="moreShow"></person-title>
      <div class="toolCen">
        <div class="toolItem">
          <span class="toolIcon centerIcon" @click="toolSpecific(1)"></span>
          <p>会员中心</p>
        </div>
        <div class="toolItem">
          <span class="toolIcon inteIcon" @click="toolSpecific(2)"></span>
          <p>会员积分</p>
        </div>
        <div class="toolItem">
          <span class="toolIcon storeIcon" @click="toolSpecific(3)"></span>
          <p>门店查询</p>
        </div>
        <div class="toolItem">
          <span class="toolIcon cusserIcon" @click="toolSpecific(4)"></span>
          <p>客服</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {memberCenter, listDelivery, goodscollectionList, cartNum, customerService} from 'util/netApi'
import {http} from 'util/request'
import PersonTitle from './ComCenterSmillTitle'
import ActivitysDetails from './components/ActivitysSwiper'
import OrderIndex from '../order/OrderIndex'
import { config } from 'util/config'
import BScroll from 'better-scroll'
import Card from 'common/commonCard/Card'
export default {
  name: 'PersonCenter',
  data () {
    return {
      list: [],
      name: '',
      hasAddress: false,
      imageUrl: config.imageUrl, // 图片路径
      imageAfterUrl: config.imageAfterUrl,
      memberHead: '',
      collNum: [], // shangp收藏数量
      coupons: [], // 卡券
      addName: '',
      phone: '',
      address: '',
      moreShow: false,
      goodsCollArr: [],
      articleCollNum: 0,
      footprintNum: 0,
      orderNum: null, // 订单数量
      scrolled: false, // 滚动
      count: 0, // 购物车数量
      cardScrollWidth: 0,
      activitys: [] // 活动
    }
  },
  created () {},
  components: {
    PersonTitle,
    OrderIndex,
    ActivitysDetails,
    Card
  },
  filters: {
    timeFilter: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.split('T')[0].replace(/-/ig, '.')
    }
  },
  watch: {
    '$route' (to, from) {
      if (to.name === 'personCenter') {
        this.getUserInfo()
      }
    }
  },
  methods: {
    // 基础信息加载
    getUserInfo () {
      http(memberCenter).then((response) => {
        console.log(response)
        let data = response.data.body
        if (data.coupons.length > 0) {
          this.coupons = data.coupons
          this.cardScrollWidth = (this.coupons.length * 950 - 50) / 112.5
        }
        let operPhone = data.memberName
        if ((/^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/.test(Number(operPhone)))) {
          this.phone = operPhone.toString().substring(0, 3) + '****' + operPhone.toString().substring(7, 11)
        } else {
          this.phone = operPhone
        }
        this.list = response.data.body
        this.orderNum = data.orderCount
        this.memberHead = data.memberHead
        // 商品收藏
        this.collNum = data.collections.collectionCounts
        // 活动
        this.activitys = data.activitys.articles
        let goodsArr = data.collections.collectionGoods
        if (goodsArr.length > 0) {
          if (goodsArr.length > 3) {
            for (let i = 0; i < 3; i++) {
              this.goodsCollArr.push(goodsArr[i])
            }
          } else {
            for (let i = 0; i < goodsArr.length; i++) {
              this.goodsCollArr.push(goodsArr[i])
            }
          }
        }
      })
    },
    // 基础资料设置
    userDataSet () {
      this.$router.push('/userInfoSet')
    },
    // 我的地址
    goodsAddress () {
      let params = {
        rows: 20,
        page: 1
      }
      http(listDelivery, params).then((response) => {
        let data = response.data.body
        if (data.list.length > 1) {
          this.hasAddress = true
          // 判断默认地址
          for (var i = 0; i < data.list.length; i++) {
            if (data.list[i].idDefault === 1) {
              this.addName = data.list[i].receiverName
              if (data.list[i].province === '上海' || data.list[i].province === '重庆' || data.list[i].province === '北京' || data.list[i].province === '天津') {
                this.address = data.list[i].city + data.list[i].area + data.list[i].detailedAddr
              } else {
                this.address = data.list[i].province + data.list[i].city + data.list[i].area + data.list[i].detailedAddr
              }
            }
          }
        }
      })
    },
    // 商品收藏
    goodsCollent () {
      let params = {
        rows: 100,
        page: 1
      }
      http(goodscollectionList, params).then((response) => {
        let data = response.data.body
        if (data.list.length > 1) {
          if (data.collections.collectionGoods.length > 3) {
            for (let i = 0; i < 3; i++) {
              this.goodsCollArr.push(this.imageUrl + data.list[i].goodsImage + this.imageAfterUrl)
            }
          } else {
            for (let i = 0; i < data.list.length; i++) {
              this.goodsCollArr.push(this.imageUrl + data.list[i].goodsImage + this.imageAfterUrl)
            }
          }
        }
      })
    },
    // 必备工具跳转
    toolSpecific (type) {
      if (type === 1) {
        this.$router.push('/memberCenter/1')
      } else if (type === 2) {
        this.$router.push('/integralDetails')
      } else if (type === 3) {
        this.$router.push('/ToolStore')
      } else {
        window.location.href = customerService
      }
    },
    // 优惠卡券
    cardVoucher () {
      this.$router.push('/cardVoucher')
    },
    // 商品详情
    goodsDetails (id) {
      this.$router.push('/details/' + id)
    },
    // 滚动监听
    handleScroll () {
      this.scrolled = window.scrollY > 0
    },
    // 购物车数量
    goodsNum () {
      http(cartNum).then((response) => {
        if (response.data.code === 0) {
          this.count = response.data.body
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 客服
    perNews () {
      window.location.href = customerService
    }
  },
  mounted () {
    this.scroll = new BScroll(this.$refs.couponsScroll, {
      bounce: {
        left: true,
        right: true
      },
      scrollY: false,
      scrollX: true,
      click: true,
      startX: 0
    })
    window.addEventListener('scroll', this.handleScroll)
    this.getUserInfo()
    this.goodsNum()
  },
  deactivated () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>
<style lang='stylus' scoped>
  @import "~styles/mixins.styl";
  .wrapper>>>.cardVouItem .right
     width 72%
  .wrapper>>>.cardVouItem .left
    width 28%
  .wrapper
    width 100%
    box-sizing border-box
    padding-bottom 60px
    overflow hidden
    background #fff
    .perTopbg
      width 100%
      height 470px
      bgImage('../../images/personBg')
      position relative
      margin-bottom 280px
      .headerScroll
        width 100%
        height 130px
        box-sizing border-box
        padding 36px 54px
        .perSeting
          width 60px
          height 50px
          background #fff
          bgImage("../../icons/personalSetupfff")
        .perShopping
          width 60px
          height 60px
          bgImage("../../icons/personCartfff")
          position relative
          .num
            position absolute
            width 46px
            height 46px
            line-height 46px
            text-align center
            border-radius 50%
            background-color #D54B4B
            color #fff
            top 0
            transform translate(50%,-25%)
            right 0
        .perNews
          width 54px
          height 60px
          margin-left 50px
          bgImage("../../icons/personalNewsfff")
        .left
          float left
        .right
          float right
      .headerScroll.active
        position fixed
        left 0
        top 0
        z-index 19
        background #fff
        .perSeting
          bgImage("../../icons/personalSetup")
        .perShopping
          display none
        .perNews
          bgImage("../../icons/personalNews")
      .perHeader
        width 88%
        height 480px
        border-radius 20px
        background #fff
        position absolute
        left 0
        right 0
        margin auto
        bottom -330px
        box-shadow 0px 6px 6px 0px rgba(0,0,0,0.08)
        .headerInfo
          width 100%
          height 250px
          img
            display block
            width 254px
            height 254px
            position absolute
            left 80px
            top -48px
          .headerRightText
            height 250px
            margin-left 366px
            box-sizing border-box
            padding-top 40px
            .headerName
              width 100%
              line-height 60px
              font-size 60px
              color #262626
              font-weight bold
            .memberGrade
              display block
              width 100%
              height 96px
              line-height 96px
              font-size 36px
              color #A8AEB9
              margin-top 24px
              i
                float left
                width 88px
                height 96px
                margin-right 10px
              .memberGradeIcon01
                background url('../../icons/menberGrade01.png') no-repeat center center /100% 100%
              .memberGradeIcon02
                background url('../../icons/menberGrade02.png') no-repeat center center /100% 100%
              .memberGradeIcon03
                background url('../../icons/menberGrade03.png') no-repeat center center /100% 100%
              .memberGradeIcon04
                background url('../../icons/menberGrade04.png') no-repeat center center /100% 100%
        .userInfo
          display flex
          width calc(100% - 100px)
          height 200px
          margin 0 auto
          .userInfoItem
            flex 1
            box-sizing border-box
            padding-top 50px
            span
              display block
              width 100%
              height 50px
              line-height 50px
              font-size 50px
              text-align center
              font-weight bold
              margin-bottom 30px
              color #252525
            span.userCode
              display block
              width 50px
              height 50px
              margin 0 auto 30px
              bgImage('../../icons/memberCard')
            p
              width 100%
              font-size 36px
              color #333333
              text-align center
  .perOrder
    width 100%
    box-sizing border-box
    padding 100px 50px 150px
    .couponsScroll
      width 100%
      height 370px
      overflow hidden
    .couponsScroll.couponsScrollBg
      height 100%
      background url('../../images/emptyDiscount@3x.png') no-repeat center center/100%
  .addressBox,.collectBox
    width 100%
    height auto
    box-sizing border-box
    padding 30px 0 50px 0
    .goToAdd
      display block
      width 260px
      height 112px
      line-height 112px
      text-align center
      border 1px solid #C78A5C
      font-size 40px
      color #BA825A
      margin 0 auto 30px
    .buttonTips
      display block
      width 100%
      text-align center
      font-size 36px
      color #999999
    .addressName
      width 100%
      height 50px
      line-height 50px
      margin-bottom 30px
      h3,span
        float left
        font-size 46px
        color #262626
        margin-right 100px
    .addressText
      display block
      width 100%
      height 50px
      line-height 50px
      font-size 40px
      color #808080
  .goodsCollImg
    width 100%
    height 310px
    img
      float left
      width 310px
      height 310px
      margin-right 46px
      border 1px solid #E6E6E6
    img:last-child
      margin-right 0
  .collectNumber
    display flex
    width 82%
    height 50px
    margin 70px auto 130px
  .collectNumItem
    flex 1
    border-right 1px solid #E6E6E6
    span
      float left
      line-height 50px
      font-size 46px
      color #333333
      text-align center
    p
      float left
      line-height 50px
      text-align center
      margin-right 50px
      font-size 36px
      color #333333
  .collectNumItem.list
    text-align left
    box-sizing border-box
    padding-left 160px
    border-right none
  .collectNumItem.left
    text-align right
    box-sizing border-box
    padding-right 160px
  .toolCen
    width 100%
    height 140px
    margin-top 30px
    display flex
    .toolItem
      flex 1
      height 140px
      span.toolIcon
        display block
        width 60px
        height 60px
        margin 0 auto 34px
      .centerIcon
        bgImage('../../icons/toolCenter')
      .inteIcon
        bgImage('../../icons/toolInte')
      .storeIcon
        bgImage('../../icons/toolStore')
      .cusserIcon
        bgImage('../../icons/toolCusser')
      p
        display block
        width 100%
        line-height 40px
        font-size 36px
        color #333333
        text-align center
  .emptyDiscountBg
    width 100%
    height 320px
    margin-bottom 50px
    overflow hidden
    .enptyCoupons
      width 100%
      height 320px
      bgImage('../../images/emptyDiscount')
  .memberGradeScroll
    width 980px
    height 320px
    .cardVolItem
      float left
      width 900px
      height 320px
      margin-right 50px
      // bgImage('../../images/newCardVouItemBg')
      .left
        float left
        width 260px
        height 320px
        box-sizing border-box
        padding-top 60px
        span
          display block
          width 100%
          height 80px
          line-height 80px
          font-size 40px
          font-weight bold
          text-align center
          color #333333
          i
            display inline-block
            font-size 80px
            color #333333
            font-weight bold
        p
          display block
          width 180px
          height 56px
          text-align center
          font-size 30px
          margin 30px auto 0
          color #FFFFFF
          border 1px solid #fff
      .right
        float left
        width 70%
        box-sizing border-box
        padding 40px 24px 0
        h3
          width 100%
          font-size 40px
          font-weight bold
          color #333333
        .displayBtn
          width 100%
          div
            display inline-block
    .cardVolItem:last-child
      margin-right 0
  .operBtn
    float right
    width 160px
    height 60px
    text-align center
    line-height 60px
    font-size 30px
    border-radius 30px
  .newUse
    color #fff
    background linear-gradient(-45deg,rgba(172,124,98,1),rgba(220,166,116,1))
    box-shadow 0px 16px 24px 0px rgba(207,154,111,0.66)
  .newReceive
    color #BA825A
    border 1px solid #BA825A
  .noReceive
    color #fff
    background #E6E6E6
  .activityTime
    width 100%
    margin-top 30px
    font-size 30px
    color #999999
  .countDown
    color #D54B4B
  .fullSub
    font-size 36px
    color #BA825A
  .cardDetails
    float right
    background #fff
    font-size 30px
    color #666666
  .emptyAmusingBg
    width 100%
    height 325px
    bgImage('../../images/amusingActive')
    margin-bottom 50px
  .ceshi
    width 100%
    height 400px
    background green
    .ceshiscroll
      width 3000px
      background red
.immediately
  height  64px
  line-height 64px
  color #333333
  border-top-left-radius 32px
  border-bottom-left-radius 32px
  font-size 30px
  background linear-gradient(45deg,#E0B286,#FAD3AF)
  width 260px
  display flex
  vertical-align middle
  align-items center
  margin-top 10px
  em
    display inline-block
    vertical-align middle
  em.fl
    width 46px
    height 40px
    margin 0 10px
    background url('../../icons/icon_hb.png') no-repeat center center/100%
  em.fr
    width 28px
    height 28px
    margin-left 10px
    background url('../../icons/round-arr.png') no-repeat center center/100%
</style>
